/*===============================================
Template Name: Moving- HTML5 Template
Version: 0.1
================================================*/
/*TABLE OF DREAMHUB*/
/*=====================
02. Moving Header Menu Area Css
03. Moving Hero Area Css
04. Moving About Area Css
05. Moving Service Area Css
07. Moving Choose UsArea Css
08. Moving Testimonial Area Css
09. Moving work Area Css
10. Moving Call Du Action Area Css
11. Moving Contact Area Css
12. Moving Footer Area Css
13. Moving Bridcame Area Css
14. Moving Team Area Css
15. Moving Blog Details Area Css
16. Moving Blog Area Css
17. Moving Contacts Section Area Css
18. Moving Faq Area Css
19. Moving Pricing Area Css
20. Moving Service Details Area Css
21. Moving Team  Area Css
22. Moving Search Popup Area Css
23. Moving Search Box Css
24. Moving Loader Css
=======================*/
/*================================
 <--Start Moving header Area Css-->
==================================*/
.header-area {
    background: #fff;
    padding: 20px 0 20px;
}
.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #f10239 !important;
    transition: .5s;
    z-index: 922;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}
.sticky .header-menu ul li a {
    color: #fff;
}
.sticky .header-search-button a i {
    color: #fff;
}
/*header logo*/
a.active-sticky {
    display: none;
}
.sticky a.active-sticky2{
	display:none;
}
.sticky a.active-sticky{
	display:inline-block;
}
/*header-menu*/
.header-menu {
    text-align: right;
}
.header-menu ul {
    display: inline-block;
}
.header-menu ul li {
    list-style: none;
    display: inline-block;
}
.header-menu ul li a {
    color: #232323;
    font-size: 16px;
    padding: 40px 13px;
	position:relative;
}

/*sub-menu*/
.header-menu ul li .sub-menu {
    position: absolute;
    text-align: center;
    background: #fff;
    width: 215px;
    border-radius: 3px;
    top: 115%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    z-index: 999;
    margin-top: 20px;
    border-top: 2px solid #f10239;
}
.header-menu ul li .sub-menu ul li a:hover {
    background: #f10239;
    color: #fff;
}
.header-menu ul li .sub-menu ul li {
	display: block;
}
.header-menu ul li .sub-menu ul {
	display: block;
	text-align: left;
	
}
.header-menu ul li .sub-menu ul li a {
    display: inline-block;
    padding: 8px 20px;
    font-size: 16px;
    color: #222;
    text-transform: capitalize;
    font-weight: 500;
    width: 100%;
    border-bottom: 1px solid rgba(241,2,57,0.4);
}
.added-new-submenu:hover .sub-menu {
	visibility:visible;
	top:100%;
	opacity:1;
}
/*header search*/
.header-search-button {
    display: inline-block;
    margin-left: 32px;
    margin-right: 43px;
}

/*header-button*/
.header-button {
    display: inline-block;
}
.header-button a {
	display: inline-block;
	font-size: 14px;
	line-height: 26px;
	color: #ffffff;
	background: #f10239;
	padding: 15px 37px;
	border-radius: 10px 0 10px 0;
	letter-spacing: 2px;
	border: 1px solid #f10239;
	transition: .5s;
}
.sticky .header-button a{
	background:#fff;
	color:#f10239;
}
.header-button a:hover {
	background: #fff;
	border: 1px solid #f10239;
	color: #f10239;
}
.header-search-button a i {
    display: inline-block;
    color: #232323;
}
/*================================
 <--Start Moving  Hero Area Css-->
==================================*/
.hero-area {
    position: relative;
    height: 900px;
}
.hero-area:before {
    position: absolute;
    content: "";
    left: 36px;
    top: 0;
    background: url(../image/hero-img.png);
    height: 100%;
    width: 96%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 50px;
}
.hero-title h5 {
    font-size: 18px;
    color: #f3031e;
    font-weight: 700;
    margin-bottom: 14px;
}
.hero-title h1 {
    font-size: 55px;
    line-height: 60px;
    font-weight: 700;
}
.hero-description p {
    width: 80%;
    margin: 23px 0 33px;
}
.hero-button a {
    font-size: 14px;
    letter-spacing: 2px;
    color: #ffffff;
    background: #f10239;
    display: inline-block;
    padding: 19px 41px;
    border-radius: 10px 0 10px 0;
    position: relative;
    transition: 0.5s;
    overflow: hidden;
	z-index:44;
	border:1px solid transparent; 
}
.hero-button a:before, .hero-button a:after {
    content: "";
    position: absolute;
    top: -3px;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    z-index: -1;
}
.hero-button a:before {
  border-right: 40px solid transparent;
  transform: translateX(-100%);
}
.hero-button a:after {
  border-left: 40px solid transparent;
  transform: translateX(100%);
}
.hero-button a:hover {
  color: #f10239;
  border:1px solid #f10239;
}
.hero-button a:hover:before {
  transform: translateX(-30%);
}
.hero-button a:hover:after {
  transform: translateX(30%);
}
/*hero-thumb*/
.hero-thumb {
    margin-top: 15px;
}
/*section-title*/
.section-title {
    text-align: center;
    margin-bottom: 52px;
}
.section-sub-title h3 {
    font-size: 18px;
    color: #f3031e;
    font-weight: 700;
    margin-bottom: 17px;
}
.section-description p {
    font-size: 18px;
    color: #616161;
    font-weight: 500;
    width: 63%;
    margin: auto;
    margin-top: 23px;
}
/*================================
 <--Start Moving  About Css-->
==================================*/
.about-area {
    padding: 120px 0 120px;
}
.about-left {
    position: relative;
    right: 44px;
}
/*counter-box*/
.counter-box {
    position: absolute;
    bottom: -20px;
    background: #fff;
    right: -6px;
    box-shadow: 0 0 9px rgba(2,2,2,0.1);
    padding: 40px 26px 41px;
    border-bottom: 3px solid #f3031e;
}
.counter-namber h1 {
    display: inline-block;
    font-size: 60px;
    line-height: 45px;
    color: #190202;
    font-weight: 700;
    font-family: "Roboto";
}
.counter-namber span {
    font-size: 30px;
    display: inline-block;
    position: relative;
    color: #f3031e;
    top: -26px;
    left: -3px;
}
.counter-title h3 {
    font-size: 16px;
    color: #232323;
    font-weight: 400;
    font-family: "Roboto";
    margin-top: 18px;
}
/*about-right*/
.section-title-one {
    text-align: left;
} 
p.about-description-one {
    margin: 22px 0 19px;
}
.about-button a {
    font-size: 14px;
    letter-spacing: 2px;
    color: #ffffff;
    background: #f3031e;
    display: inline-block;
    padding: 13px 28px;
    border-radius: 10px 0 10px 0;
    margin-top: 20px;
	position:relative;
	overflow:hidden;
	z-index:1;
	border:1px solid transparent;
}
.about-button a:before, .about-button a:after {
    content: "";
    position: absolute;
    top: -7px;
    right: 6px;
    bottom: 0;
    left: 6px;
    border-top: 35px solid #fff;
    border-bottom: 35px solid #fff;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    z-index: -1;
}
.about-button a:before {
  border-right: 30px solid transparent;
  transform: translateX(-100%);
}
.about-button a:after {
  border-left: 30px solid transparent;
  transform: translateX(100%);
}
.about-button a:hover {
  color: #f3031e;
  border:1px solid #f3031e;
}
.about-button a:hover:before {
  transform: translateX(-30%);
}
.about-button a:hover:after {
  transform: translateX(30%);
}

/*================================
 <--Start Moving  Service Css-->
==================================*/
.service-area {
    position: relative;
    padding: 113px 0 120px;
}
.service-area.style {
    background: #F7E7E7;
}
.service-area:before {
    position: absolute;
    content: "";
    left: 36px;
    top: 0;
    width: 96%;
    height: 100%;
    background: #F7E7E7;
    border-radius: 50px;
}
/*service-box*/
.service-single-box {
    padding: 18px 20px 30px;
    text-align: center;
    background: #fff;
    border-radius: 5px;
}
.service-single-thumb {
    overflow:hidden;
}
.service-single-thumb img {
    width: 100%;
	transition:.5s;
}
/*service-content*/
.service-title h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 26px 0 15px;
}
.service-button a {
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Roboto";
    background: #f3031e;
    display: inline-block;
    padding: 4px 24px;
    border-radius: 5px 0 5px 0;
    margin-top: 10px;
	position:relative;
	overflow:hidden;
	z-index:1;
	border:1px solid #f3031e;
	
}
.service-button a:before, .service-button a:after {
    content: "";
    position: absolute;
    top: -5px;
    right: 6px;
    bottom: 0;
    left: 6px;
    border-top: 25px solid #fff;
    border-bottom: 25px solid #fff;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    z-index: -1;
}
.service-button a:before {
  border-right: 24px solid transparent;
  transform: translateX(-100%);
}
.service-button a:after {
  border-left: 24px solid transparent;
  transform: translateX(100%);
}
.service-button a:hover {
  color: #f00;
  border:1px solid #f00;
}
.service-button a:hover:before {
  transform: translateX(-30%);
}
.service-button a:hover:after {
  transform: translateX(30%);
}
/*all hover*/
.service-single-box:hover .service-single-thumb img {
    transform: scale(1.1);
}
/*================================
 <--Start Moving  choose us Css-->
==================================*/
.choose-us-area {
    padding: 117px 0 89px;
}
.choose-us-left {
    position: relative;
    right: 41px;
}
.choose-us-left .section-title-one {
    margin-bottom: 43px;
}
/*choose us single box*/
.choose-us-single-box {
    background: #F7E7E7;
    padding: 31px 75px 40px  28px;
    border-radius: 10px 0 10px 0;
    margin-bottom: 30px;
    position: relative;
    z-index: 44;
	overflow:hidden;
}
.choose-us-single-box:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 7px;
    height: 105%;
    background: #f3031e;
    border-radius: 10px 0 10px 0;
    transition: 0.5s;
    z-index: -1;
}
.choose-us-single-box:hover:before{
	width:100%;
}
.choose-us-icon i {
    margin-right: 20px;
    background: #f00;
    display: inline-block;
    padding: 25px 25px;
    border-radius: 0 10px 0 10px;
    transition: 0.5s;
    font-size: 40px;
    color: #fff;
    display: inline-block;
}
.choose-us-single-box:hover .choose-us-icon i{
	background:#fff;
	color:#f00;
} 
.choose-us-title h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
	transition:0.5s;
}
.choose-us-description p {
    margin: 0;
	transition:0.5s;
}
/*all hover*/
.choose-us-single-box:hover .choose-us-title h3{
	color:#fff;
}
.choose-us-single-box:hover .choose-us-description p{
	color:#fff;
}
/*================================
 <--Start Moving  Testimonial area Css-->
==================================*/
.testimonial-area {
    background: #FDF9F8;
    padding: 112px 0 180px;
}
.testimonial-area .section-description p {
    width: 43%;
}
/*testimonial single box*/
.testimonial-single-box {
    text-align: center;
    box-shadow: 0 0 9px rgba(2,2,2,0.15);
    padding: 40px 22px 31px;
    margin-top: 4px;
    margin-bottom: 11px;
    background: #fff;
    position: relative;
}
.testimonial-single-box:before {
    position: absolute;
    content: "";
    right: -11px;
    bottom: 0;
    height: 93%;
    width: 10px;
	background: rgba(243,3,30,0.5803921568627451);
	transition:0.5s;
}
.testimonial-single-box:hover:before {
    background: #F3031E;
}

.testimonial-single-box:after {
    position: absolute;
    content: "";
    right: -11px;
    bottom: -11px;
    height: 11px;
    width: 94%;
	background: rgba(243,3,30,0.5803921568627451);
	transition:0.5s;
}
.testimonial-single-box:hover:after {
    background: #F3031E;
}
.active.center .testimonial-single-box:before {
    background: #F3031E;
}
.active.center .testimonial-single-box:after {
    background: #F3031E;
}
.testimonial-thumb {
    display: inline-block;
}
/*testimonial title*/
.testimonial-title h3 {
    font-size: 22px;
    margin-top: 6px;
    margin-bottom: 10px;
}
.testimonial-title p {
    margin-bottom: 14px;
}
.testi-star-icon i {
    font-size: 16px;
    color: #ed031d;
}
span.rating-poin {
    background: #ed031d;
    width: 35px;
    height: 18px;
    border-radius: 2px;
    display: inline-block;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    position: relative;
    top: 1px;
    line-height: 20px;
    left: 3px;
    text-align: center;
}
/*owl-dots*/
.owl-dots {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -85px;
}
.owl-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin: 0 4px;
    background-color: rgba(233,3,29,0.7294117647058823);
	transition:.5s;
}
.owl-dot.active {
    background: #F3031E;
}
.owl-dot:hover{
	background:#ED031D;
}

/*================================
 <--Start Moving  Wook area Css-->
==================================*/
.work-area {
    padding: 114px 0 85px;
}
.work-area.style {
    background: #F8F9FC;
}
.work-area .section-description p {
    width: 42%;
}
/*single work box*/
.single-work-box {
    text-align: center;
    padding: 0px 0px 10px;
    transition: 0.5s;
}
.single-work-box.style .work-box-icon:before {
    display: none;
}
.single-work-box.active .work-box-icon {
    background: #F3031E;
}
.single-work-box.active .work-box-icon img {
    filter: brightness(0)invert(1);
}
/*single work icon*/
.work-box-icon {
    height: 126px;
    width: 126px;
    display: inline-block;
    background: #F7E7E8;
    line-height: 126px;
    text-align: center;
    border-radius: 30px 0 30px 0;
	position:relative;
	transition:0.5s;
}
.work-box-icon:before {
    position: absolute;
    content: "";
    left: 141px;
    top: 62px;
    border: 1px dashed #E9031D;
    width: 102%;
}
.single-work-box:hover .work-box-icon img {
    filter: brightness(0)invert(1);
}
.work-box-icon img {
	transition:.5s;
}
.work-title h3 {
    font-size: 22px;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 25px 0 14px;
}
/*all hover*/
.single-work-box:hover .work-box-icon {
    background: #E9031D;
}
/*================================
 <--Start Moving  Call Do Action area Css-->
==================================*/
.call-do-action-area {
    background: url(../image/call-do-thumb.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 115px 0 115px;
    background-attachment: fixed;
}
.call-do-action-area .section-mean-title h1 {
    color: #fff;
}
.call-do-action-area .section-description p {
    color: #e8dede;
    width: 75%;
}
.call-do-action-button {
    text-align: center;
    margin-top: 23px;
}
.call-do-action-button a {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
	border: 1px solid #EE2626;
    display: inline-block;
    padding: 13px 42px;
    margin: 0 14px;
    border-radius: 10px 0 10px;
	position:relative;
	overflow:hidden;
	z-index:44;
	transition:.5s;
}
.call-do-action-button a:before, .call-do-action-button a:after {
    content: "";
    position: absolute;
    top: -12px;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    transition: 0.5s;
    border-radius: 10px 0 10px 0;
    z-index: -1;
}
.call-do-action-button a:before {
	border-right: 35px solid transparent;
	transform: translateX(-100%);
}
.call-do-action-button a:after {
	border-left: 35px solid transparent;
	transform: translateX(100%);
}
.call-do-action-button a:hover {
	color: #EE2626;
	border:1px solid #fff;
}
.call-do-action-button a:hover:before {
	transform: translateX(-30%);
}
.call-do-action-button a:hover:after {
	transform: translateX(30%);
}
.call-do-action-button a.active {
    background: #EE2626;
}
.call-do-action-button a.active:hover {
    color: #EE2626 !important;
    border: 1px solid #EE2626 !important;
}
.call-do-action-button a i {
    display: inline-block;
    font-size: 15px;
    margin-left: 11px;
}
.style.fas.fa-chevron-right {
    font-size: 10px;
    position: relative;
    top: -1px;
    left: -4px;
}
/*================================
 <--Start Dreamhub Contact Area Css-->
==================================*/
.contacts-area {
	position: relative;
	padding: 97px 0 100px;
	background: url(../image/contact.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.contact-content {
    position: relative;
    top: 15px;
    left: 61%;
    background: #F0031D;
    display: inline-block;
    padding: 23px 25px 4px;
    border-radius: 30px 0;
    border: 15px solid #F3707E;
}
.help-desk p {
    color: #ffffff;
    font-weight: 500;
    margin: 0;
} 
.help-desk h6 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    margin: 2px 0 3px;
}
.help-desk h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    font-family: 'Roboto';
}
.contacts-titles h1 {
    margin-bottom: 29px;
    position: relative;
    display: inline-block;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 30px;
}
.contacts-titles h1:before {
    position: absolute;
    content: "";
    right: -69px;
    top: 22px;
    background: #232323;
    height: 3px;
    width: 60px;
}
.form_box input {
    width: 100%;
    height: 50px;
    padding-left: 25px;
    background: #fff;
    transition: .5s;
    outline: 0;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px 0;
}
.form_box input::placeholder {
    font-size: 14px;
    color: #616161;
}
 .form_box.style {
    width: 100%;
    height: 79px;
    padding-left: 1px;
    background: #fff;
    transition: .5s;
    outline: 0;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px 0;
    padding-top: 15px;
}
.contacts-area .form_box textarea {
    width: 100%;
    padding-left: 25px;
    padding-top: 22px;
    height: 140px;
    outline: 0;
    transition: .5s;
    background: #fff;
    margin-top: 2px;
    border: none;
    border-radius: 10px 0;
}
.form_box textarea::placeholder {
    font-size: 14px;
    color: #616161;
}
/*contacts btn button*/
.contacts-btn button {
    background: #EE2626;
    padding: 10px 40px;
    display: inline-block;
    border: none;
    border-radius: 10px 0;
    color: #fff;
    margin-top: 26px;
    border: 1px solid transparent;
    transition: .5s;
    position: relative;
    margin-left: 16px;
    font-size: 16px;
}
.contacts-btn button:hover {
    border: 1px solid #EE2626;
    background: #fff;
    color: #EE2626;
}
/*================================
 <--Start Dreamhub Footer Area Css-->
==================================*/
.footer-area {
	padding: 100px 0 27px;
}
.footer-description p {
    margin: 29px 0 39px;
}
.footer-social-address {
	display: inline-block;
}
.footer-social-address ul li {
	list-style: none;
	display: inline-block;
}
.footer-social-address ul li a {
    display: inline-block;
    margin-right: 17px;
    background: #F0031D;
    text-align: center;
    color: #fff;
    border-radius: 5px 0;
    height: 35px;
    width: 35px;
    line-height: 35px;
    transition: 0.5s;
    border: 1px solid transparent;
}
.footer-social-address ul li a:hover {
    color: #FE0000;
    border: 1px solid #FE0000;
    background: transparent;
}
/*footer title*/
.widget-title h3 {
    font-size: 22px;
    margin-bottom: 26px;
    margin-top: 17px;
}
.footer-list ul li {
	list-style: none;
}
.footer-list ul li a {
    display: inline-block;
    margin-bottom: 14px;
    color: #616161;
}
.footer-list ul li a i {
    display: inline-block;
    margin-right: 9px;
}

/*recent-post-item*/
.recent-post-item {
	margin-bottom: 20px;
}
.recent-post-item.active {
    border-bottom: 1px solid #A3A3A3;
    padding-bottom: 24px;
    padding-top: 7px;
}
.recent-tost-img {
    float: left;
    margin-right: 13px;
}
.recent-tost-text a {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-family: "Roboto";
}
.recent-tost-text p {
	font-size: 14px;
	line-height: 22px;
}
.rcomment {
	margin-top: -5px;
}
/*company-info-desc*/
.company-info-box {
    padding-top: 5px;
}
.company-info-desc {
    margin-bottom: 3px;
}
.company-info-title h6 {
    font-size: 16px;
    color: #232323;
    font-family: "Roboto";
}
.company-icon {
    float: left;
    margin-right: 19px;
}
.company-icon a {
    color: #E12323;
    display: inline-block;
    font-size: 22px;
}
.company-info-title {
    overflow: hidden;
}
/*all hover*/
.footer-fllow a:hover {
    color: #f10239;
}
.footer-list ul li a:hover {
    color: #f10239;
	
}

.recent-tost-text a:hover {
    color: #f10239;
}
/*================================
 <--Start Dreamhub Footer bottom Area Css-->
==================================*/
.row.footer-btm {
    border-top: 1px solid #A3A3A3;
    margin-top: 50px;
    padding-top: 25px;
}
.footer-bottom-right {
	text-align: right;
}
.footer-bottom-right a {
	display: inline-block;
	font-size: 16px;
	padding-left: 26px;
	
}
.footer-bottom-right a:hover {
    color: #F10239;
}
/*================================
 <--Start Moving Breadcumb Area Css-->
=================================*/
.breadcumb-area {
    background: url(../image/breadcrumbs.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 400px;
    background-attachment: fixed;
    position: relative;
	z-index: 9;
}
.breadcumb-area::before {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	right: 0;
	background-color: rgba(29, 48, 82, 0.6);
	width: 100%;
}
.breadcumb-area.moving_breadcumb:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 46%;
    background: #324056;
    opacity: 0.700;
    z-index: -1;
}
.breadcumb-title h1 {
    font-size: 50px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
	transition:.5s;
}
.breadcumb-content-text a {
    color: #fff;
	display: inline-block;
}
.breadcumb-content-text a:hover {
    color: #F7012D;
}
.breadcumb-content-text i {
    color: #fff;
    margin: 0px  10px 0px;
    display: inline-block;
}
.breadcumb-content-text span {
    color: #fff;
}
/*================================
 <--Start Moving Call-do-action-area style-two Css-->
=================================*/
.call-do-action-area.style-two {
    background: #fff;
    padding: 100px 0 50px;
}
.call-do-action-area.style-two .section-mean-title h1 {
    color: #232323;
}
.call-do-action-area.style-two .section-description p {
    color: #616161;
}
.contacts-area.style-two .contacts-titles p {
    font-size: 18px;
    font-weight: 500;
}
/*single-call-do-box*/
.single-call-do-box {
    text-align: center;
    padding: 10px 35px 10px;
}
.single-call-do-icon i {
    text-align: center;
    height: 65px;
    width: 65px;
    line-height: 65px;
    display: inline-block;
    border: 2px solid #E9031D;
    border-radius: 50%;
    font-size: 30px;
    color: #E9031D;
    margin-bottom: 18px;
}
.call-do-text a {
    color: #616161;
    display: inline-block;
}
.call-do-text a:hover {
    color: #E9031D;
}
/*google-maps*/
.google-maps iframe {
    width: 100%;
    height: 600px;
}
/*================================
 <--Start Moving Contacts style-two Area style-two Css-->
=================================*/
.contact-area.style-two {
    background: #F7E7E7;
    padding: 92px 0 100px;
}
.contacts-titles p {
    width: 58%;
    margin: auto;
    margin-bottom: 30px;
}
.from-icon {
    position: absolute;
    top: 12px;
    left: 32px;
}
.form_boxs input {
    height: 50px;
    width: 100%;
    padding-left: 41px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px 0;
    outline: 0;
}
.form_boxs input::placeholder {
	font-size:14px;
	color:#616161;
}
.form_boxs textarea {
    width: 100%;
    padding-left: 25px;
    padding-top: 22px;
    height: 140px;
    outline: 0;
    transition: .5s;
    background: #fff;
    margin-top: 2px;
    border: none;
    border-radius: 10px 0;
}
.form_boxs textarea::placeholder {
	font-size:14px;
	color:#616161;
}
/*contact-form-button*/
.contact-form-button {
    text-align: center;
}
.contact-form-button button {
    background: #EE2626;
    padding: 10px 40px;
    display: inline-block;
    border: none;
    border-radius: 10px 0;
    color: #fff;
    font-size: 20px;
    margin-top: 26px;
    border: 1px solid transparent;
    transition: .5s;
}
.contact-form-button button:hover {
    color: #EE2626;
    background: #fff;
    border: 1px solid #EE2626;
}
/*================================
 <--Start Moving Blog area Css-->
=================================*/
.blog-area {
    padding: 100px 0 42px;
}
.blog-single-box {
    margin-bottom: 30px;
    transition: .5s;
}
.blog-single-box:hover{
	 box-shadow: 0 5px 20px rgb(0 0 0 / 20%);
}
.blog-single-thumb{
	position:relative;
}
.blog-single-thumb:before {
    position: absolute;
    content: "";
    left: 26px;
    top: 18px;
    height: 85%;
    background: #fff;
    width: 85%;
    right: 0;
    bottom: 0;
    opacity: 0.800;
    border: 3px solid rgba(238,38,38,0.5);
    transform: scale(0);
    transition: .5s;
}
.blog-single-box:hover .blog-single-thumb:before{
	transform:scale(1);
}
.blog-single-thumb img {
    width: 100%;
}
.single-icon {
    position: absolute;
    top: 91px;
    left: 84px;
}
.single-icon a {
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    background: #f3031e;
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    border-radius: 10px 0px;
    border: 1px solid transparent;
    opacity: 0;
    margin-top: 50px;
	transition: .7s;
}
.single-icon a:hover {
    border: 1px solid #f3031e;
    color: #f3031e;
	background:#fff;
}
.blog-box-contact {
    box-shadow: 0 0px 7px rgb(0 0 0 / 20%);
    padding: 15px 27px 21px 29px;
}
.blog-date-time span {
    font-size: 12px;
}

.blog-title h3 a {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 13px;
    display: inline-block;
    color: #232323;
}
.blog-title h3 a:hover{
	color:#f3031e;
}
.blog-description p {
    margin-bottom: 10px;
}
.blog-btn a {
    font-size: 16px;
    display: inline-block;
    text-transform: capitalize;
    color: #f10239;
}
.blog-single-box:hover .single-icon a {
    opacity: 1;
    margin-top: 0;
}
/*pagination*/
.row.upper {
    margin-top: 42px;
}
.paginations ul {
    display: inline-block;
	border:2px solid #F7E7E7;
}
.paginations ul li {
    list-style: none;
    display: inline-block;
    margin: 0 16px 0 16px;
}
.paginations ul li {
    list-style: none;
    display: inline-block;
    margin: 0 15px 0 15px;
}
.paginations ul li a {
    display: inline-block;
    font-size: 12px;
	transition.5s;
}
.paginations ul li a:hover{
	color:#F0031D;
}
a.avtive {
    color: #EE2626;
}
.paginations ul li a span i {
    background: #F7E7E7;
    display: inline-block;
    padding: 18px;
    margin: 0px -15px;
	transition:.5s;
}
.paginations ul li a span i:hover{
	color:#F0031D;
}
/*================================
 <--Start Moving Blog Details area Css-->
=================================*/
.blog-details-area {
    padding: 118px 0 0;
}

.meta-blog-command span a {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
}
.meta-blog-command span a:hover{
	color:#DB1D00;
}
.meta-blog-command span a i {
    color: #EE2626;
    font-size: 13px;
}
.blog-details-title a h1 {
    display: inline-block;
    margin: 0px 0 35px;
}
.single-blog-details-thumb a img {
    width: 100%;
}
.blog-details-content {
    padding: 25px 30px 39px;
    box-shadow: 0 5px 30px rgb(0 0 0 / 20%);
}
.blog-details-meta {
    display: inline-block;
}
.blog-details-meta a {
    display: inline-block;
    margin-right: 18px;
}
.meta-blog-right {
    display: inline-block;
    margin-left: 18px;
}
.blog-details-content-text {
    margin: 10px 0 23px;
    text-align: justify;
}
.single-blogs-thumb img {
    width: 100%;
}
.blog-details-text p {
    margin: 23px 0 0px;
    text-align: justify;
}
.blog-details-content-text-inner p {
    text-align: justify;
    margin: 18px 0 23px;
}
.blog-details-title-two h3 {
    margin-top: 12px;
}
/*blog-details-social-address */
.blog-details-social-address.hr3 {
    border-top: 1px solid #F7E7E7;
    padding-top: 40px;
}
.blog-details-social-address ul li {
    list-style: none;
    display: inline-block;
}
.blog-details-social-address ul li a {
    display: inline-block;
    margin-right: 9px;
    font-size: 15px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border: 1px solid #F7E7E7;
    text-align: center;
    color: #F0031D;
	transition:.5s;
}
.blog-details-social-address ul li a:hover{
	background:#F0031D;
	color:#fff;
}
/*form box*/
.row.bg {
    margin-top: 57px;
}
.contact-title {
    margin-bottom: 45px;
}
.blog-details-area .form_box input {
    width: 100%;
    height: 50px;
    padding-left: 25px;
    background: #fff;
    transition: .5s;
    outline: 0;
    margin-bottom: 20px;
    border: 1px solid #F7E7E8;
    border-radius: 5px 0;
}
.blog-details-area .form_box textarea {
    width: 100%;
    padding-left: 25px;
    background: #fff;
    transition: .5s;
    outline: 0;
    border: 1px solid #F7E7E8;
    border-radius: 5px 0;
    padding-top: 10px;
}
.form-button button {
    font-size: 16px;
    border: none;
    background: #E9031D;
    color: #fff;
    padding: 10px 24px;
    border-radius: 10px 0;
    margin-top: 30px;
	border:1px solid #E9031D;
	transition:.5s;
}
.form-button button:hover {
    background:#fff;
	border:1px solid #E9031D;
	color:#E9031D;
}
/*sidebar box*/
.sidebar-search-button {
    background: #fff;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    padding: 25px;
    margin-bottom: 40px;
}
.form-boxs input {
    width: 100%;
    padding: 10px 9px;
    border: 1px solid #F7E7E8;
}
.search-button button {
    position: absolute;
    top: 36px;
    right: 60px;
    border: none;
    background: none;
    opacity: 0.800;
}
/*sidebar-menu*/
.sidebar-box {
    background: #fff;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    margin-bottom: 40px;
    padding: 25px;
}
.sidebar-box h3{
	margin-bottom:30px;
}
.sidebar-menu ul li {
    list-style: none;
    padding: 18px 0px 15px;
    border-top: 1px solid #F7E7E7;
	transition:.5s;
}
.sidebar-menu ul li:hover a{
	color:#DB1D00;
}
.sidebar-menu ul li a {
    display: inline-block;
    color: #616161;
}
/*resent-post-single-box*/
.resent-post-single-box {
    margin-bottom: 20px;
}
.resent-post-single-box.sytle {
    border-bottom: 1px solid #F7E7E7;
    padding-bottom: 21px;
}
.sidebar-thumb-content {
    margin-left: 13px;
}
.sidebar-thumb-title a h2 {
    font-size: 17px;
    display: inline-block;
    margin: 0 0 3px;
	transition:.5s;
}
.sidebar-thumb-title a h2:hover{
	color:#DB1D00;
}
.sidebar-thumb-title span {
    font-size: 14px;
}
/*Tags-Cloud*/
.Tags-Cloud-title a {
    display: inline-block;
    border: solid 1px #DB1D00;
    padding: 4px 18px;
    border-radius: 5px 0;
    margin-right: 5px;
    margin-bottom: 10px;
    transition: .5s;
}
.Tags-Cloud-title a:hover{
	background:#DB1D00;
	color:#fff;
}

/*all hover*/

.blog-details-title a h1:hover {
    color: #DB1D00;
}
/*================================
 <--Start Moving Counter Area Css-->
==================================*/
.counter-area {
	position: relative;
	padding: 10px 0 80px;
}
.row.counter-bg {
	background: #FEF4F3;
	padding: 41px 0 42px;
	border-radius: 10px;
}
.counter-box-content {
	text-align: center;
}
.counter-namber h1 {
	font-size: 46px;
	color: #db1d00;
	font-weight: 500;
	display: inline;
}
.counter-title h3 {
	font-size: 18px;
	color: #050129;
	font-weight: 500;
	margin-top: 16px;
}
/*conter shape*/
.counter-shape-one {
	position: absolute;
	top: -16px;
	right: 354px;
	z-index: -1;
}
.counter-shape-tow {
	position: absolute;
	bottom: 54px;
	margin-left: -42px;
	z-index: -1;
}
/*==============================*/
/*Start moving Team Area*/
/*==============================*/
.team-area {
    background: #F7E7E7;
    padding: 100px 0 100px;
}
/*start thumb box*/
.single-team-box {
    overflow: hidden;
    border-radius: 5px;
    transition: .3s;
    margin-bottom: 30px;
}
.single-team-box:hover {
    transform: translateY(-10px);
}
/*single-team-thumb*/
.single-team-thumb {
    position: relative; 
}
.single-team-thumb img {
    width: 100%;
}
/*single-thumbicon*/
.single-thumb-icon {
    position: absolute;
    bottom: 12px;
    text-align: center;
    transition: .3s;
    right: 0;
    left: 0;
    margin: auto;
}
.single-thumb-icon ul li {
    list-style: none;
    display: inline-block;
}
.single-thumb-icon ul li:nth-child(1) a {
    transition-delay: 0.2s;
}
.single-thumb-icon ul li:nth-child(2) a {
    transition-delay: 0.3s;
}
.single-thumb-icon ul li:nth-child(3) a {
    transition-delay: 0.4s;
}
.single-thumb-icon ul li:nth-child(4) a {
    transition-delay: 0.5s;
}
.single-thumb-icon ul li a {
    display: inline-block;
    margin-right: 5px;
    transition-delay: .5s;
    overflow: hidden;
    transform: translateY(-100px);
    opacity: 0;
}

.single-team-box:hover .single-thumb-icon ul li a{
    transform: translateY(0px);
    opacity: 1;
    overflow: hidden;
    visibility: visible;
}
.single-thumb-icon ul li a i {
    color: #fff;
    transition:.5s;
    font-size: 15px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background: #f10239;
    color: #fff;
    border-radius: 50%;
    border: 1px solid transparent;
}
.single-thumb-icon ul li a i:hover{
    color: #f10239;
    background: #fff;
    border: 1px solid #fff;
}
.team-thumb-content {
    text-align: center;
    background: #fff;
    padding: 9px 0 20px;
    border-bottom: solid 5px #f3031e;
}
.team-thumb-content h3 a {
    font-size: 22px;
    font-weight: 700;
    display: inline-block;
	transition:.5s;
}
.team-thumb-content h3 a:hover {
    color:#f3031e;
}
.team-thumb-content span {
    color: #f3031e;
}
/*==============================*/
/*Start moving Service Details Area*/
/*==============================*/
.serice-details-area {
	padding: 100px 0 0;
}
/*service-details-left*/
.service-details-left {
    background: #fff;
    padding: 25px;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
}
.service-dtls-form-field input {
    width: 100%;
    padding: 10px 9px;
    border: 1px solid #F7E7E8;
}
.service-search-btn button {
    position: absolute;
    top: 36px;
    right: 55px;
    border: none;
    background: none;
}
/*single-service-details-bpx*/
.single-service-details-box {
    background: #fff;
    padding: 25px;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    margin-top: 40px;
}
.single-widget-list h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 37px;
}
.single-widget-list ul li {
    list-style: none;
    padding: 18px 0 15px;
    border-top: 1px solid #F7E7E7;
}
.single-widget-list ul li a {
    display: inline-block;
    color: #616161;
}
.single-widget-list ul li:hover a {
    color: #f10239;
}
/*single-sidebar-widget*/
.single-sidebar-widget h3 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 41px;
    margin-bottom: 25px;
}
.single-sidebar-widget span {
    font-size: 18px;
    color: #f10239;
}
.single-sidebar-widget ul li {
    list-style: none;
    background: #fff;
    padding: 12px 0 12px;
    border: 1px solid #F7E7E7;
}
ul.style li {
    margin-bottom: 20px;
}
.single-sidebar-widget ul li a {
    display: inline-block;
    color: #616161;
    margin-left: 26px;
    font-weight: 500;
}
.single-sidebar-widget ul li:hover a {
    color: #f10239;
}
.single-sidebar-widget ul li a i {
    display: inline-block;
    margin-right: 13px;
    font-size: 16px;
}
/*moving-service-details-box*/
.moving-service-details-thubm img {
    width: 100%;
}
.service-page-title h1 {
    margin: 32px 0 23px;
}
.serivce-details-desc span {
    color: #f10239;
}
/*.row.style3*/
.row.style3 {
    margin-top: 42px;
}
.service-details-thumb img {
    width: 100%;
    border-radius: 10px;
}
/*service-page-title2*/
.service-page-title2 h1 {
    font-size: 30px;
    margin-bottom: 8px;
}
.widget-service-details-icon p {
    margin-bottom: 10px;
}
.widget-service-details-icon p i {
    font-size: 25px;
    color: #f10239;
    margin-right: 2px;
    position: relative;
    top: 4px;
}
/*service-work-process-box*/
.service-work-process-box {
    padding: 40px 25px 20px;
    background: #F5F5F5;
    border-radius: 4px;
    text-align: center;
    margin-top: 32px;
}
.service-work-process-title h4 {
    font-size: 22px;
    font-weight: 700;
    padding: 20px 0 10px;
}
.service-work-process-number {
    display: inline-block;
    padding: 10px;
    position: relative;
}
.service-work-process-number:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 10px solid #f10239;
    border-radius: 50%;
    opacity: .3;
}
.service-work-process-number span {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #fff;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: #f10239;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
/***
======================================================
<-- Moving Faq Area Css -->
======================================================***/
.faq-area.new-style {
    background: #F7E8E8;
    padding: 100px 0 100px;
}
.faq-area.new-style .section-description p {
    width: 100%;
}
/*accordion*/
.accordion li {
    list-style: none;
    padding: 2px 0px 15px;
    position: relative;
    z-index: 1;
}
.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    color: #fff !important;
    z-index: 1;
}

.accordion li p {
    display: none;
    font-size: 16px;
    color: #B1B2B4;
    padding: 25px 0 10px 30px;
    margin: 0;
}

.accordion a:before {
    width: 2px;
    height: 10px;
    background: #FF3C00;
    position: absolute;
    right: 32px;
    content: " ";
    top: 22px;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.accordion a:after {
    width: 10px;
    height: 2px;
    background: #FF3C00;
    position: absolute;
    right: 28px;
    content: " ";
    top: 26px;
    transition: all 0.2s ease-in-out;
}

.accordion a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: #fff;
}

.accordion a.active:before {
    display: none;
}

a.active {
    color: #fff !important;
    border: 1px solid #f10239!important;
    background: #f10239!important;
}

.accordion li a span {
    position: relative;
    z-index: 1;
}

.accordion li a span:after {
    position: absolute;
    content: "";
    z-index: -1;
    left: -35px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url(https://html.ditsolution.net/drtheme/dreamhub/images/resource/question.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
}

/*accordion start*/

.faq-sectiions .dreamit-icon-list ul li i {
    width: inherit;
    height: inherit;
    line-height: inherit;
    border-radius: 0;
    background-color: inherit;
    display: inline-block;
    color: #ff3c00;
    font-size: 22px;
    margin-right: 8px;
    position: relative;
    top: 4px;
}

.study-button a i {
    transition: .5s;
}

.study-button a:hover i {
    color: #FF3C00;
}

/* Faq New Style */

.faq-area.new-style .accordion li a {
    padding: 16px 20px 16px 30px;
    border-radius: 0;
    background-color: #1F2932;
    border: 0;
}

.faq-area.new-style .accordion li a span:after {
    display: none;
}

.faq-area.new-style .accordion li p {
    padding: 25px 0 25px 30px;
    background: #1F2932;
}
/***
======================================================
<-- Moving Case Astudy Area Css -->
======================================================***/
.case-study-area.style-three {
    background: #F7E8E8;
    padding: 100px 0 100px;
}
.case-study-area.style-three .section-title-one {
    margin-bottom: 32px;
}
.case-study-area.style-three .section-description p {
    width: 47%;
}
/*case-study-single-box*/
.case-study-single-box {
    position: relative;
    overflow: hidden;
    transition: .5s;
    margin-bottom: 30px;
}
.case-study-thumb img {
    width: 100%;
}
/*single_portfolio_icon*/
.single_portfolio_icon {
    position: absolute;
    top: 148px;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.single_portfolio_icon a {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background: #f10239;
    border-radius: 50%;
    margin: 0 25px;
    opacity: 0;
}
/*case-study-content*/
.case-study-content {
    background: #f10239;
    text-align: center;
    padding: 18px 0 7px;
    position: absolute;
    bottom: -110px;
	transition:.5s;
}
.case-study-title h6 {
    font-size: 16px;
    color: #fff;
}
.case-study-title h3 a {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
/*all hover*/
.case-study-single-box:hover .single_portfolio_icon a {
    opacity: 1;
    margin: 0 5px;
}
.case-study-single-box:hover .case-study-content {
    bottom: 0;
}
/***
======================================================
<-- Moving Protfolio Details Area Css -->
======================================================***/
.protfolio-details {
    background: #fff;
    padding: 42px 0 0;
}
.protfolio-details-intro {
    box-shadow: 0 0 15px rgb(0 0 0 / 10%);
    padding: 60px;
    margin-top: 60px;
}
.prot-thumb img {
    width: 100%;
}
/*prot-info*/
.prot-info {
    padding: 0 50px;
}
.prot-title h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 38px;
}
.prot-info ul li {
    list-style: none;
    margin-bottom: 15px;
    font-size: 16px;
    text-transform: capitalize;
    display: inline-flex;
}
.prot-info strong {
    position: relative;
    font-size: 16px;
    color: #232323;
    width: 120px;
    margin-right: 10px;
}
.prot-info strong:after {
    position: absolute;
    content: ":";
    right: 0;
}
.prot-info span {
    flex: 1;
}
/*share-text*/
.share-text {
    float: left;
    margin-right: 20px;
}
.share-text h4 {
    font-size: 20px;
    color: #616161;
    font-weight: 700;
    margin-top: 6px;
}
/*prot-social-icon*/
.prot-social-icon ul li a {
    display: inline-block;
    margin-right: 15px;
    background: #f10239;
    text-align: center;
    color: #fff;
    border-radius: 5px 0;
    height: 35px;
    width: 35px;
    line-height: 35px;
    transition: 0.5s;
    border: 1px solid transparent;
}
.prot-social-icon ul li a:hover {
    border: 1px solid #f10239;
    background: none;
    color:#f10239
}
.prot-title h2 {
    margin-bottom: 18px;
}
img.my-4 {
    width: 100%;
}
/***
======================================================
<-- Moving Shop Area Css -->
======================================================***/
.shop-area {
    background: #F7E8E8;
    padding: 120px 0 50px;
}
/*single-box-shop*/
.single-box-shop {
    transition: .5s;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}
/*single shop thumb*/
.single-shop-thumb {
    overflow: hidden;
}
.single-shop-thumb img {
    width: 100%;
    transition: .5s;
}
/*single shop icon*/
.single-shop-icon {
    position: absolute;
    top: 167px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.single-shop-icon ul li {
    list-style: none;
    display: inline-block;
}
.single-shop-icon ul li a {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background: #f10239;
    border-radius: 50%;
    margin: 0 32px;
    transition: .5s;
    opacity: 0;
}
/*shop content*/
.shop-content {
    text-align: center;
    padding: 30px 0px;
}
.shop-category a {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    background: rgba(241,2,57,0.4);
    padding: 0px 10px;
    margin-right: 11px;
    transition: .5s;
}
.shop-category a:hover {
    background: #f10239;
    color: #fff;
}
.shop-product-title h3 a {
    font-size: 25px;
    font-weight: 700;
    display: inline-block;
    color: #232323;
    margin-top: 18px;
    transition: .5s;
}
.shop-product-title h3 a:hover{
    color: #f10239;
}
/*all hover*/
.single-box-shop:hover .single-shop-icon ul li a {
    margin: 5px;
    opacity: 1;
}
.single-box-shop:hover .single-shop-thumb img {
    transform: scale(1.1);
}
/*scrollUp*/
#scrollUp {
    bottom: 30px;
    background: #F10239;
    color: #fff;
    font-size: 30px;
    height: 46px;
    right: 49px;
    text-align: center;
    border-radius: 55px;
    width: 45px;
    line-height: 40px;
}
#scrollUp i {
    display: inline-block;
    font-size: 20px;
    color: #fff;
}
/*===========================
<-- Moving Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: #9A241C;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: #FF3C00;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}

/*** 
====================================================================
    Search Popup
====================================================================
***/
.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); 
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.search-popup{
    width: 100%;
}
.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}
.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #f10239;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    height: 70px;
    line-height: 70px;
    text-align: center;
}
.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}
.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}
.search-popup .form-group{
    position:relative;
    margin:0px; 
    overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}
.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #f10239;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    border: none;
}
.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:#000000;
}
.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.flaticon-multiply:before {
    content: inherit;
}
button.close-search i {
    font-size: 40px;
    color: #fff;
    display: inline-block;
}
span.flaticon-multiply i {
    display: inline-block;
    color: #f10239;
}

.header-search-btn {
    position: relative;
    display: inline-block;
}
.header-search-btn i {
    font-size: 16px;
    color: #fff;
    transition: .5s;
    margin-right: 0;
    position: relative;
    left: -24px;
}


















